
<template>
	<view class="content">
		<view class="up">
			<view class="portrait">
				<image src="../../../static/img/sc/tx1.jpeg"></image>
				<p><strong style="color: #505050;">Redamancy_LR</strong><br />
					<span style="font-size: 13px;color: #a6a6a6;">十月蔓延全城的糖炒栗子香，十一月手里热乎乎的烤红薯，
						十二月串着竹签塞满嘴的冰糖葫芦，这一年又要结束了。</span>
				</p>
			</view>
			<view class="navigation">
				<ul>
					<li><a @click="pageTo('/pages/MySubscription/MySubscription')">我的订阅</a></li>
					<li><a @click="pageTo('/pages/shoucang/tabbar-1')">我的收藏</a></li>
					<li><a @click="pageTo('/pages/xiazai/xiazai')">我的下载</a></li>
				</ul>
			</view>
		</view>
		<view class="dividing-line">
			
		</view>
		<view class="example-body">
			<view class="example-box">
				<view class="title">
					<span>在学的课程</span>
					<span>查看全部 ></span>
				</view>
				<view>
					<ul class="course-list">
						<li>
							<ul class="course-text">
								<li>3天入门水彩插画【涂鸦王国】</li>
								<li>已学17%</li>
							</ul>
							<view class="course-img">
								<image src="../../../static/img/sc/sc1.jpg" style="width: 131px;height: 73px;"></image>
							</view>
						</li>
						<li style="border: 1px solid #eceef1;"></li>
						<li>
							<ul class="course-text">
								<li>跟简七学理财</li>
								<li>已学0%</li>
							</ul>
							<view class="course-img">
								<image src="../../../static/img/sc/sc2.jpg" style="width: 131px;height: 73px;"></image>
							</view>
						</li>
					</ul>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		methods: {
			pageTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style>
	@charset "UTF-8";
	.up{
		height: 186px;
	}
	/* #endif */
	.navigation{
		width: 100%;
	}
			
	.navigation ul{
		text-align: center;
		padding-left: 22px;
	}
	.navigation ul li {
		display: inline-block;
		margin-right: 7%;
	}

	.navigation ul li a {
		font-size: 14px;
	}

	.navigation ul li:nth-child(1) {
		border-right: 2px solid #eceef1;
		padding:0% 10% 0% 0%;
	}

	.navigation ul li:nth-child(2) {
		border-right: 2px solid #eceef1;
		padding:0% 10% 0% 0%;
	}

	.navigation ul li a {
		text-decoration: none;
		color: #555555;
	}

	.navigation ul li a:hover {
		text-decoration: none;
		color: #EE7700;
	}

	.portrait {
		height: 150px;
	}

	.portrait image {
		width: 66px;
		height: 66px;
		border-radius: 50%; //圆角百分比
		display: inline-block;
		vertical-align: top;
		margin: 10% 5% 0% 2%;
	}

	.portrait p {
		display: inline-block;
		width: 70%;
		height: 70px;
		/* text-align: center; */
		vertical-align: top;
		padding-top: 10%;
		font-size: 12px;
	}
	.dividing-line{
		height: 10px;
		background-color: #f2f4f8;
		
	}
	.example-box{
		padding: 30px 15px 0px 15px;
	}
	.title{
		display: flex;
		justify-content: space-between;
	}
	.title span:nth-child(1){
		font-size: 15px;
		font-weight: 600;
		color: #505050;
	}
	.title span:nth-child(2){
		font-size: 14px;
		color: #a6a6a6;
	}
	ul{
		list-style: none;
	}
	.course-list{
		padding: 0;
	}
	.course-list li{
		display: flex;
		color: #505050;
		justify-content: space-between;
	}
	.course-text{
		font-size: 15px;
		padding: 0px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.course-text li:nth-child(2){
		color: #33b17b;
	}
	.course-list > li{
		margin-top: 20px;
	}
</style>
